var tableResizeMixin = function () {
  return {
    data: function () {
      return {
        isResize: false,
        dragging: false,
        proxyWidth: 0,
        dragData: null,
        tableEl: null
      }
    },

    methods: {
      handleMouseMove: function (event) {
        if (this.isPrint || this.dragging) {
          return;
        };

        var target = event.target;
        while (target && target.tagName !== 'TD') {
          target = target.parentNode;
        }
        if (target === null) {
          this.isResize = false;
          return;
        }

        if ($(target).hasClass('no-resize')) {
          this.isResize = false;
          return;
        }
        var rect = SysUtil.getElRect(target);
        if (rect.width > 12 && rect.right - event.pageX < 8) {
          this.isResize = true;
        } else {
          this.isResize = false;
        }
      },

      handleMouseDown: function (event) {
        if (!this.isResize) {
          return;
        }
        var target = event.target;
        while (target && target.tagName !== 'TD') {
          target = target.parentNode;
        }
        if (target === null) {
          return;
        }

        var index = $(target).index();
        target = $(this.tableEl).find(`tr:eq(0) td:eq(${index})`)[0];
        var rect = SysUtil.getElRect(target);
        var minLeft = rect.left + 30;

        var nextEl = target.nextElementSibling;
        var nextRect = SysUtil.getElRect(nextEl);
        var maxRight = nextRect.right - 30;
        this.dragData = {
          dragEl: target,
          nextEl: nextEl,
          minLeft: minLeft,
          maxRight: maxRight,
          pageX: undefined
        };
        this.dragging = true;
        document.onselectstart = function () {
          return false;
        };
        document.ondragstart = function () {
          return false;
        };
        document.addEventListener('mousemove', this.tableResizeing);
        document.addEventListener('mouseup', this.toResizeWidth);
      },

      tableResizeing: function (event) {
        var pageX = event.pageX;
        var dragData = this.dragData;
        if (pageX < dragData.minLeft || pageX > dragData.maxRight) {
          return;
        }
        var tableEl = this.tableEl;
        var tableRect = SysUtil.getElRect(tableEl);
        var proxyWidth = pageX - tableRect.left;
        this.proxyWidth = proxyWidth;
        dragData.pageX = pageX;
      },

      toResizeWidth: function () {
        var dragData = this.dragData;
        var pageX = dragData.pageX;
        if (pageX !== undefined) {
          var dragEl = dragData.dragEl;
          var dragRect = SysUtil.getElRect(dragEl);
          var rangeWidth = pageX - dragRect.right;
          this.resizeWidth($(dragEl).index(), rangeWidth);
        }

        document.removeEventListener('mousemove', this.tableResizeing);
        document.removeEventListener('mouseup', this.toResizeWidth);
        document.onselectstart = null;
        document.ondragstart = null;
        this.isResize = false;
        this.dragData = null;
        this.dragging = false;
      },

      resizeWidth: function () {}
    },
  };
};
